<template>
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back"></view>
		<!--顶部导航-->
		<uni-nav-bar fixed="true" :statusBar="true" title="尊享服务" backgroundColor="transparent" :border="false"></uni-nav-bar>
		
		<view class="bb_text">宝宝信息</view>
		
		<view class="tianxie_box" @click="gotopage('zhunx_tianxiebbxinxi')">
			<view class="display-cloumn">
				<view class="add_box">
					<image src="../../static/img/zhunxiangfuwu/zhun_aad.png" class="add_img"></image>
				</view>
				<view class="add_text">请添加宝宝信息</view>
			</view>
		</view>
		
		<view class="bb_meiyue_lingqu">每月纸尿裤领取</view>
		
		<!-- 每月领取纸尿裤 -->
		<view class="lingque_box">
			<view class="lingqu_header_box">
				
				<view class="linqu_left">
					<view class="lin_box_img">
						<image src="../../static/img/zhunxiangfuwu/ziniao.png" class="lin_he_img"></image>
					</view>
					
					<view class="lin_text">已领取0/3份</view>
				</view>
				
				<view class="lin_shen_box">
					<view class="lin_shenyu">本月领取时间剩余</view>
					<view class="lin_day_num">9天</view>
				</view>
			</view>
			
			<view class="lin_banner_box">
				<image :src="joinplan_Img" class="lin_banner_img"></image>
			</view>
			
			<view class="lin_button_box" @click="gotopage('jiarujiahua')">
				<view class="lin_button_box_text">前往领取</view>
			</view>
		</view>
		
		<!-- 尊享服务 -->
		<view class="zhunxiang_text">尊享服务</view>
		
		<view class="zhunxiang_box" @click="gotopage('chat')">
			<view class="zhunx_img_box">
				<image class="zhunx_img" src="../../static/img/zhunxiangfuwu/zhun1.png"></image>
			</view>
			
			<view class="zhunx_text_box_info">
				<view class="zhunx_left_box">
					<view class="zhunx_text1">育婴师、营养师、早教师咨询服务</view>
					<view class="zhunx_text2">在线时间：09:00-23:00</view>
				</view>
				
				<view class="zhunx_right">
					<image class="zhunx_right_img" src="../../static/img/zhunxiangfuwu/zhun_next.png"></image>
				</view>
			</view>
		</view>
		
		<view class="zhunxiang_box" @click="gotopage('vedio')">
			<view class="zhunx_img_box2">
				<image class="zhunx_img2" src="../../static/img/zhunxiangfuwu/zhun-two.png"></image>
			</view>
			
			<view class="zhunx_text_box_info">
				<view class="zhunx_left_box">
					<view class="zhunx_text1">线上早教课</view>
					<view class="zhunx_text2">让家长和宝宝足不出户也能学早期教育</view>
				</view>
				
				<view class="zhunx_right">
					<image class="zhunx_right_img" src="../../static/img/zhunxiangfuwu/zhun_next.png"></image>
				</view>
			</view>
		</view>
		
		<view class="zhunxiang_box" @click="gotopage('shenri')">
			<view class="zhunx_img_box3">
				<image class="zhunx_img3" src="../../static/img/zhunxiangfuwu/zhun3.png"></image>
			</view>
			
			<view class="zhunx_text_box_info">
				<view class="zhunx_left_box">
					<view class="zhunx_text1">生日大礼包</view>
					<view class="zhunx_text2">宝宝生日当天领取价值888的神秘大礼包</view>
				</view>
				
				<view class="zhunx_right">
					<image class="zhunx_right_img" src="../../static/img/zhunxiangfuwu/zhun_next.png"></image>
				</view>
			</view>
		</view>
		
		<view style="height: 50upx;"></view>
		
		
		
		<zn-tabbar @changeTabbar="changeTabbar" :value4="value4" :vipStatus="vipStatus"></zn-tabbar>
		
		
	</view>
</template>

<script>
	import ZnTabbar from '../../components/zn-tabbar/zn-tabbar.vue';
	import HostConfig from '@/utils/host.js';
	import Host from '@/utils/api.js';
	export default{
		components:{
			ZnTabbar
		},
		data(){
			return{
				value4:0,
				joinplan_Img: '',
				vipStatus:'',
			}
		},
		onLoad(){
			let that = this;
			// 判断用户是否为会员
			uni.login({
			  provider: 'weixin',
			  success: function (loginRes) {
				uni.request({
				    url: Host.ApiGetOpenid.url, //仅为示例，并非真实接口地址。
					method: 'GET',
				    data: {
				        code: loginRes.code,
				    },
				    success: (res) => {
						that.openid = res.data.openid;
						uni.request({
						    url: Host.ApiGetuserInfo.url, //仅为示例，并非真实接口地址。
							method: 'GET',
						    data: {
						        openid: that.openid,
						    },
						    success: (res) => {
								if(res.data.result == ""){
									console.log('普通会员');
									that.vipStatus = 1;//普通用户
								}else{
									that.vipStatus = 2;//会员
								}
						    }
						});
				    }
				});
			  }
			});
			// 判断用户是否为会员
			uni.login({
			  provider: 'weixin',
			  success: function (loginRes) {
				uni.request({
				    url: Host.ApiGetOpenid.url, //仅为示例，并非真实接口地址。
					method: 'GET',
				    data: {
				        code: loginRes.code,
				    },
				    success: (res) => {
						that.openid = res.data.openid;
						uni.request({
						    url: Host.ApiGetuserInfo.url, //仅为示例，并非真实接口地址。
							method: 'GET',
						    data: {
						        openid: that.openid,
						    },
						    success: (res) => {
								if(res.data.result == ""){
									console.log('普通会员');
									that.vipStatus = 1;//普通用户
								}else{
									that.vipStatus = 2;//会员
								}
						    }
						});
				    }
				});
			  }
			});
			uni.request({
				url: Host.ApiBanner.url, //仅为示例，并非真实接口地址。
				method: 'GET',
				success: (res) => {
					let zhensongImg = res.data.image;
					let hostUrl = HostConfig.service.host;
					var list = res.data.data;
					list.map((value, index) =>{
						if(value.location == 'joinplan'){	// 宝宝生日礼物
							that.joinplan_Img = hostUrl + value['image'];
						}
					});
				}
			});
		},
		methods:{
			changeTabbar(e){
				this.value4 = e;
			},
			gotopage(param){
				if(param == 'zhunx_tianxiebbxinxi'){
					uni.navigateTo({
						url: '/pages/zhunxingfuwu/tianxiebbxinxi/tianxiebbxinxi'
					})
				}
				if(param == 'jiarujiahua'){
					if(this.vipStatus == 1){
						uni.navigateTo({
							url:'/pages/zhunxingfuwu/jiarujiahua/jiarujiahua'	// 加入计划
						})
					}else{
						uni.navigateTo({
							url:'/pages/goods/feed/goods_detail?goods_id=' + 1,//商品详情
						})
					}
				}
				if(param == 'chat'){
					uni.navigateTo({
						url:'/pages/chat/chat'	// 咨询页面
					})
				}
				if(param == 'vedio'){
					uni.navigateTo({
						url:'/pages/vedio/vedio'	// 线上早教课
					})
				}
				if(param == 'shenri'){
					uni.navigateTo({
						url:'/pages/shenri/shenri'	// 生日大礼包
					})
				}
			}
		}
	}
</script>

<style>
	page{ 
		background-color: #F6F6F6;
	}
	.page_back{
		z-index: -100;
		background: linear-gradient(180deg, #6EC5FF 0%, rgba(167, 228, 255, 0) 100%);
		opacity: 0.11;
		width: 100%;
		height: 913upx;
		position: absolute;
	}
	.bb_text{
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50upx;
		margin: 20upx 24upx 0 24upx;
	}
	.tianxie_box{
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 702upx;
		height: 234upx;
		border-radius: 12upx;
		margin: 24upx 24upx 0 24upx;
		
	}
	.display-cloumn{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.add_box{
		width: 70upx;
		height: 70upx;
	}
	.add_img{
		width: 70upx;
		height: 70upx;
	}
	.add_text{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
	}
	.bb_meiyue_lingqu{
		margin: 48upx 0 0 28upx;
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50upx;
	}
	.lingque_box{
		margin: 24upx 24upx 0 28upx;
		width: 702upx;
		height: 508upx;
		background: linear-gradient(47deg, #FFD4AE 0%, #FFDEC4 100%);
		border-radius: 8upx;
		padding: 30upx 24upx 16upx 24upx;
		box-sizing: border-box;
	}
	.lingqu_header_box{
		display: flex;
		justify-content: space-between;
		width: 656upx;
		align-items: center;
	}
	.linqu_left{
		display: flex;
		align-items: center;
	}
	.lin_box_img{
		width: 50upx;
		height: 52upx;
	}
	.lin_he_img{
		width: 50upx;
		height: 52upx;
	}
	.lin_text{
		margin-left: 12upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40upx;
		
	}
	.lin_shen_box{
		display: flex;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3B4144;
		line-height: 34upx;
	}
	.lin_shenyu{
		color: #3B4144;
	}
	.lin_day_num{
		color: #FF4E2F;
	}
	.lin_banner_box{
		width: 654upx;
		height: 262upx;
		margin-top: 24upx;
	}
	.lin_banner_img{
		width: 654upx;
		height: 262upx;
	}
	.lin_button_box{
		width: 654upx;
		height: 92upx;
		background: #3B4144;
		border-radius: 55upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 24upx;
		box-sizing: content-box;
	}
	.lin_button_box_text{
		box-sizing: content-box;
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFC28D;
		line-height: 44upx;
		background: linear-gradient(360deg, #FFB779 0%, #FFECDC 69%, #FFDEC4 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.zhunxiang_text{
		margin: 60upx 0 0 24upx;
	}
	.zhunxiang_box{
		width: 702upx;
		height: 158upx;
		background-color: #FFFFFF;
		padding: 36upx 22upx 36upx 24upx;
		display: flex;
		justify-content: space-between;
		position: relative;
		align-items: center;
		margin: 24upx;
		box-sizing: border-box;
	}
	.zhunx_img_box{
		position: absolute;
		width: 148upx;
		height: 138upx;
		bottom: 0;
		left: 18upx;
		/* opacity: 0.1; */
	}
	.zhunx_img{
		width: 148upx;
		height: 138upx;
	}
	.zhunx_img_box2{
		position: absolute;
		bottom: 0;
		left: 18upx;
		width: 194upx;
		height: 102upx;
	}
	.zhunx_img2{
		width: 194upx;
		height: 102upx;
	}
	.zhunx_img_box3{
		position: absolute;
		bottom: 0;
		left: 18upx;
		width: 184upx;
		height: 122upx;
	}
	.zhunx_img3{
		width: 184upx;
		height: 122upx;
	}
	.zhunx_text_box_info{
		z-index: 10;
		display: flex;
		justify-content: space-between;
		width: 656upx;
		align-items: center;
	}
	.zhunx_left_box{

		
	}
	.zhunx_text1{
		width: 420upx;
		height: 40upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 40upx;
	}
	.zhunx_text2{
		width: 464upx;
		height: 34upx;
		margin-top: 12upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
	}
	.zhunx_right{
		width: 32upx;
		height: 32upx;
	}
	.zhunx_right_img{
		width: 32upx;
		height: 32upx;
	}
	.u-page__item__slot-icon{
		width: 48upx;
		height: 48upx;
	}
	
</style>
